<template>
  <div class="sign-in-container">
    <h2>扫码签到</h2>
    <div v-if="scanResult" class="result">
      <p :class="{ success: isSuccess, error: !isSuccess }">
        {{ resultMessage }}
      </p>
    </div>
    <button @click="scanQrCode" class="scan-button">
      点击扫描二维码
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const scanResult = ref(false);
const isSuccess = ref(false);
const resultMessage = ref('');

// 模拟扫描二维码的操作
// 实际应用中，可以调用手机的摄像头API或集成第三方扫码SDK
const scanQrCode = async () => {
  try {
    // 假设这是扫描到的二维码内容
    // 在实际应用中，这部分将由实际的扫码操作获得
    const mockQrContent = prompt('请输入扫描到的二维码内容（模拟）');

    if (!mockQrContent) {
      return;
    }

    // 假设用户ID已经存在（实际中应从登录状态获取）
    const userId = 'user123';

    // 发送签到请求
    const response = await axios.post('/api/sign/check-in', {
      qrContent: mockQrContent,
      userId: userId
    });

    scanResult.value = true;
    isSuccess.value = response.data.success;
    resultMessage.value = response.data.message;
  } catch (error) {
    scanResult.value = true;
    isSuccess.value = false;
    resultMessage.value = '签到失败，请重试';
    console.error('签到请求失败', error);
  }
};
</script>

<style scoped>
.sign-in-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.scan-button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
}

.result {
  margin: 20px 0;
  padding: 10px;
  border-radius: 4px;
  width: 100%;
  text-align: center;
}

.success {
  color: #4CAF50;
}

.error {
  color: #F44336;
}
</style>